<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			{{title}}
		</view>
		<view class="margin-50">
			<button @click="sendMsgToHarmony">向宿主发送消息</button>
		</view>
		<view class="margin-50">
			<button @click="goPageTwo">go to page two</button>
		</view>
		<view class="margin-50">
			<button @click="scanCode">scanCode</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const title = ref('page one')
	
	const sendMsgToHarmony = () => {
		// 小程序向宿主发送消息
		uni.sendNativeEvent(
		  'CustomUniEvent',
		  {
			  testValue: '654321'
		  },
		  (...args) => {
		    console.log(`宿主处理完成并返回如下信息：${JSON.stringify(args)}`)
		  }
		)
	}
	
	const goPageTwo = ()=>{
		uni.navigateTo({
			url: '/pages/pageTwo/pageTwo'
		})
	}

	const scanCode = () => {
		uni.scanCode({
        scanType: ["qrCode", "datamatrix","barCode"],
        // 设置扫码类型为二维码、数据矩阵码和条形码
        autoDecodeCharSet: true,
        // 自动解码字符集
        success: function (res) {
            // 扫码成功的回调函数
						uni.showToast({
                icon: 'none',
                title: '识别成功',
                duration: 3000
            })
						console.log('11111111111success', JSON.stringify(res))
        },
        fail: function (res) {
						console.log('11111111111fail', JSON.stringify(res))
            // 扫码失败的回调函数
            uni.showToast({
                icon: 'none',
                title: '没有识别到二维码',
                duration: 3000
            })
        },
        complete: function (res) {
            // 扫码完成的回调函数
        }
    });
	}
</script>

<style lang="less" scoped>
	.margin-50{
		margin: 50px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
